<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>this is one!</title>
    <link href="css/index.css" rel="stylesheet">
</head>
<body>
    <!--<img src="../image/bg.jpg" style="position:absolute; z-index:-1; left:0; top:0; width:100%; height:100%">-->

    <!--<img class="bgimage" src="image/b.jpg" style="position:absolute"; width="100%" height="100%">-->

    <!--面板-->
    <div id="panel">
        <!--面板头部-->
        <div id="panel-header">
            <h2>欢迎登陆MAC笔记本</h2>
        </div>

        <!--面板中部-->
        <div id="panel-content">
            <div class="user-pwd">
                <img src="image/Snip4.png">
                <input type="text" placeholder="请输入用户名/手机号">
            </div>
            <div class="user-pwd">
                <img src="image/Snip5.png">
                <input type="password" placeholder="请输入用户名密码">
            </div>

            <!--一些设置-->
            <div id="setting">
                <a href="#"><input type="checkbox">下次自动登陆</a>
                <a href="#" class="forget-pwd">忘记密码?</a>
            </div>

            <!--登陆按钮-->
            <button id="btn">登  陆</button>
            <!--<a href="http://www.baidu.com" target="_self">登陆</a>-->

            <div id="reg">
                还没账号?<a href="#">立即注册</a>
            </div>
        </div>

        <!--面板尾部-->
        <div id="panel-footer">
            <!--
            这里采用span 主要是用到行内标签的特性,
            同一行内,可以显示多个标签
            -->
            <span>社交账号登陆:</span>
            <img src="image/snip1.png">
            <img src="image/snip2.png">
            <img src="image/snip3.png">
        </div>

    </div>

</body>
</html>